<template>
    <div>
        <a href="/add">去添加</a><br>
        <a href="/login">去登录</a>
<h1>首页</h1>
门店名称：
<input type="text" v-model="can.menname">
开店日期区间：
<input type="date" v-model="can.zao">-
<input type="date" v-model="can.wan">
<select v-model="can.zhaung">
    <option :value="null">请选择</option>
    <option :value="true">开业</option>
    <option :value="false">闭店</option>
</select>

<input type="button" value="查询" @click="cha">
<table class="table">
<thead>
    <tr>
        <td>门店编号</td>
        <td>门店名称</td>
        <td>店长名称</td>
        <td>店长头像</td>
        <td>店长电话</td>
        <td>门店特点</td>
        <td>门店状态</td>
        <td>开店时间</td>
        <td>操作</td>
    </tr>
</thead>

<tbody>
    <tr v-for="a in da">
        <td>{{a.bianHao}}</td>
        <td>{{a.mdName}}</td>
        <td>{{a.dzName}}</td>
        <td>{{a.touXiang}}</td>
        <td>{{a.phone}}</td>
        <td>{{a.teDian}}</td>
        <td>{{a.zhuangT?"开业":"闭店"}}</td>
        <td>{{moment(a.kaiTime).format('YYYY年MM月DD日')}}</td>
        <td>操作</td>
    </tr>
</tbody>
</table>
共{{pa.zongtiao}}条，共{{pa.zontye}}页，每页{{can.pagesize}}条，当前第{{can.pageindex}}页
<input type="button" value="首页" @click="fen(1)">
<input type="button" value="上一页" @click="fen(can.pageindex-1)">
<input type="button" v-for="a in pa.zontye" :value="a" @click="xiaoyema(a)">
<input type="button" value="下一页" @click="fen(can.pageindex+1)">
<input type="button" value="尾页" @click="fen(pa.zontye)">
<select v-model="can.pagesize" @change="yerl">
    <option value="2">每页2条</option>
    <option value="3">每页3条</option>
    <option value="5">每页5条</option>
    <option value="10">每页10条</option>
</select>
<input type="number" v-model="can.pageindex" placeholder="请输入你要跳到哪页">
<input type="button" value="跳转" @click="tiao(can.pageindex)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const uc=useRouter()

onMounted(()=>{
    show()
})

//查
const cha=()=>{
    can.value.pageindex=1
    show()
}

//跳转页
const tiao=(x:any)=>{
    if(x>=1&&x<=pa.value.zontye){
        can.value.pageindex=x
        show()
    }
}

//也容量更改
const yerl=()=>{
  can.value.pageindex=1
  show()
}

//小野马
const xiaoyema=(x:any)=>{
    can.value.pageindex=x
    show()
}

//分页
const fen=(x:any)=>{
    if(x>=1&&x<=pa.value.zontye){
        can.value.pageindex=x
        show()
    }
}

//参数
const can=ref({
    menname:"",
    zao:"2025-01-01T00:00:00",
    wan:"2025-01-01T00:00:00",
    zhaung:null,
    pagesize:2,
    pageindex:1
})

//分页m
const pa=ref({
    zongtiao:0,
    zontye:0
})

//显示m
const da=ref([{
      "mdName": "",
      "dzName": "",
      "touXiang": "",
      "phone": "",
      "teDian": "",
      "zhuangT": null,
      "bianHao": "",
      "kaiTime": "2025-01-01T00:00:00"
    }])

    const show=()=>{
        axios.get("https://localhost:7020/api/MD/ShowMen",{params:can.value}).then(res=>{
            da.value=res.data.plist
            pa.value.zongtiao=res.data.coun
            pa.value.zontye=Math.ceil(pa.value.zongtiao/can.value.pagesize)
        })
    }
</script>

<style scoped>

</style>